import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

/**
 * 可切换按钮的自定义组件
 */
class EcySwapBtn extends StatefulWidget {
  final String leftBtnTitle;
  final Color leftBtnSelectedBackgroundColor;
  final Color leftBtnUnselectedBackgroundColor;
  final Color leftBtnSelectedTitleColor;
  final Color leftBtnUnselectedTitleColor;

  final String rightBtnTitle;
  final Color rightBtnSelectedBackgroundColor;
  final Color rightBtnUnselectedBackgroundColor;
  final Color rightBtnSelectedTitleColor;
  final Color rightBtnUnselectedTitleColor;

  final Function? onLeftBtnCallback;
  final Function? onRightBtnCallback;

  EcySwapBtn(
      this.leftBtnTitle,
      this.leftBtnSelectedBackgroundColor,
      this.leftBtnUnselectedBackgroundColor,
      this.leftBtnSelectedTitleColor,
      this.leftBtnUnselectedTitleColor,
      this.rightBtnTitle,
      this.rightBtnSelectedBackgroundColor,
      this.rightBtnUnselectedBackgroundColor,
      this.rightBtnSelectedTitleColor,
      this.rightBtnUnselectedTitleColor,
      this.onLeftBtnCallback,
      this.onRightBtnCallback);

  @override
  _EcySwapBtnState createState() {
    // TODO: implement createState
    return _EcySwapBtnState(
        this.leftBtnTitle,
        this.leftBtnSelectedBackgroundColor,
        this.leftBtnUnselectedBackgroundColor,
        this.leftBtnSelectedTitleColor,
        this.leftBtnUnselectedTitleColor,
        this.rightBtnTitle,
        this.rightBtnSelectedBackgroundColor,
        this.rightBtnUnselectedBackgroundColor,
        this.rightBtnSelectedTitleColor,
        this.rightBtnUnselectedTitleColor,
        this.onLeftBtnCallback,
        this.onRightBtnCallback);
  }
}

class _EcySwapBtnState extends State {
  bool leftSelected = true;
  final String leftBtnTitle;
  final Color leftBtnSelectedBackgroundColor;
  final Color leftBtnUnselectedBackgroundColor;
  final Color leftBtnSelectedTitleColor;
  final Color leftBtnUnselectedTitleColor;

  final String rightBtnTitle;
  final Color rightBtnSelectedBackgroundColor;
  final Color rightBtnUnselectedBackgroundColor;
  final Color rightBtnSelectedTitleColor;
  final Color rightBtnUnselectedTitleColor;

  final Function? onLeftBtnCallback;
  final Function? onRightBtnCallback;
  _EcySwapBtnState(
      this.leftBtnTitle,
      this.leftBtnSelectedBackgroundColor,
      this.leftBtnUnselectedBackgroundColor,
      this.leftBtnSelectedTitleColor,
      this.leftBtnUnselectedTitleColor,
      this.rightBtnTitle,
      this.rightBtnSelectedBackgroundColor,
      this.rightBtnUnselectedBackgroundColor,
      this.rightBtnSelectedTitleColor,
      this.rightBtnUnselectedTitleColor,
      this.onLeftBtnCallback,
      this.onRightBtnCallback);
  @override
  Widget build(BuildContext context) {
    return Container(
      // margin: EdgeInsets.only(top: 0.h),
      width: 175.w,
      height: 28.h,
      padding: EdgeInsets.fromLTRB(0.w, 0, 0.w, 0),
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(16.w), color: Color(0xFFF5F5F5)),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Expanded(
              flex: 1,
              child: GestureDetector(
                  onTap: () {
                    if (onLeftBtnCallback != null) {
                      setState(() {
                        leftSelected = true;
                      });
                      onLeftBtnCallback!();
                    }
                  },
                  child: Container(
                      height: 28.w,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(16.w),
                        color: leftSelected
                            ? leftBtnSelectedBackgroundColor
                            : leftBtnUnselectedBackgroundColor,
                      ),
                      child: Center(
                          child: Text(leftBtnTitle ?? "",
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                  fontWeight: FontWeight.w500,
                                  fontSize: 14.sp,
                                  color: (leftSelected
                                      ? leftBtnSelectedTitleColor
                                      : leftBtnUnselectedTitleColor))))))),
          Expanded(
              flex: 1,
              child: GestureDetector(
                  onTap: () {
                    if (onRightBtnCallback != null) {
                      setState(() {
                        leftSelected = false;
                      });
                      onRightBtnCallback!();
                    }
                  },
                  child: Container(
                      height: 28.w,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(16.w),
                        color: !leftSelected
                            ? leftBtnSelectedBackgroundColor
                            : leftBtnUnselectedBackgroundColor,
                      ),
                      child: Center(
                          child: Text(rightBtnTitle ?? "",
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                  fontWeight: FontWeight.w500,
                                  fontSize: 14.sp,
                                  color: (!leftSelected
                                      ? leftBtnSelectedTitleColor
                                      : leftBtnUnselectedTitleColor)))))))
        ],
      ),
    );
  }
}
